<template>
  <div class="home">
    <div class="full" id="full"></div>
    <el-container>
      <el-aside width="200px">
        <div class="aside_header">
          <img
            src="../assets/image/logoWL.png"
            style="position:absolute;top:0;left:5px; width: 72px; height: 72px; margin-top: 3px"
            alt=""
          />
          <div class="logo-text-wrapper">物流管理</div>
        </div>
        <el-menu
          class="el-menu-vertical-demo"
          :default-active="indexNow"
          @select="clickIndex"
          background-color="#35333c"
          text-color="white"
          v-bind:class="{ closeMenu: isActive }"
          active-text-color="white"
          router
          unique-opened
        >
          <router-link to="/home/index">
            <el-menu-item index="/home/index" class="elmenuFir">
              <i class="el-icon-s-home" style="color: white"></i>
              <span slot="title">主页</span>
            </el-menu-item>
          </router-link>

          <el-submenu
            class="father"
            v-for="(v, i) in submenuArr"
            :key="i"
            :index="i + ''"
          >
            <template slot="title">
              <i :class="v.icon" style="color: white"></i>
              <span>{{ v.tTitle }}</span>
            </template>
            <el-menu-item
              v-for="(item, inde) in v.children"
              :key="inde"
              :index="item.path"
            >
              <span slot="title">{{ item.title }}</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <div class="headDiv1">
            <span class="headSpan">
              <!-- <el-button
                type="primary"
                icon="el-icon-s-fold"
                class="headBt1"
                @click="tabTwigger"
              ></el-button> -->
              欢迎进入智+物流管理
            </span>
            <span class="headSpan2">
              <!-- <i class="el-icon-search"></i>
              <i class="el-icon-bell"></i> -->
              欢迎您，管理员
              <el-button
                type="primary"
                icon="el-icon-switch-button"
                class="loginout"
                @click="logout"
                >退出登录</el-button
              >
            </span>
          </div>
        </el-header>
        <el-main>
          <div class="TtnandTab">
            <!-- 标签页 -->
            <div class="mainDiv">
              <el-tabs
                v-model="editableTabsValue"
                type="card"
                closable
                @tab-remove="removeTab"
                @tab-click="routerTo"
              >
                <el-tab-pane
                  v-for="item in editableTabs"
                  :key="item.name"
                  :label="item.title"
                  :name="item.name"
                >
                </el-tab-pane>
              </el-tabs>
            </div>
            <div class="deleteBtn">
              <el-button
                icon="el-icon-delete"
                @click="deleteAllTab"
                class="deleteTab rePassword"
                >全部删除</el-button
              ><!-- 删除全部已有标签 -->
            </div>
          </div>
          <div class="mainView">
            <router-view />
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import home from '@/api/home';
import user from '../api/login';
export default {
  data() {
    return {
      isActive: false,
      tabLenName: 0,
      indexNow: '',
      pathNow: '', //当前路由地址  //避免冗余跳转
      editableTabsValue: '0',
      editableTabs: [], //tab渲染数组
      tabIndex: 0,
      tabData: [], //当前点击菜单的 数据数组
      //导航菜单数组
      submenuArr: [
        {
          tTitle: '用户管理',
          icon: 'el-icon-user',
          children: [
            {
              title: '员工管理',
              path: '/home/yuangong'
            },
            {
              title: '部门设置',
              path: '/home/bumen'
            }
            // {
            //   title: '角色权限',
            //   path: '/home/juese'
            // }
          ]
        },

        {
          tTitle: '车辆管理',
          icon: 'el-icon-truck',
          children: [
            {
              title: '车辆列表',
              path: '/home/carlist'
            },
            {
              title: '车辆保险',
              path: '/home/carbaoxian'
            },
            {
              title: '车辆任务',
              path: '/home/carrenwu'
            }
            // {
            //   title: '车辆地图',
            //   path: '/home/carmap'
            // }
          ]
        },

        {
          tTitle: '计划管理',
          icon: 'el-icon-document',
          children: [
            {
              title: '计划列表',
              path: '/home/planlist'
            },
            {
              title: '备品计划',
              path: '/home/beipinjihua'
            },
            {
              title: '新品/临措',
              path: '/home/xinpin'
            },
            {
              title: '电缆计划',
              path: '/home/dianlan'
            }
          ]
        },

        {
          tTitle: '仓库管理',
          icon: 'el-icon-takeaway-box',
          children: [
            {
              title: '仓库设置',
              path: '/home/cangkushezhi'
            },
            {
              title: '库位设置',
              path: '/home/kuweishezhi'
            },
            {
              title: '转移记录',
              path: '/home/zhuanyijilu'
            }
            // {
            //   title: '仓库监控',
            //   path: '/home/ckujiankong'
            // }
          ]
        },

        {
          tTitle: '库存管理',
          icon: 'el-icon-document-copy',
          children: [
            {
              title: '物料管理',
              path: '/home/wuliaoguanli'
            },
            {
              title: '库存查询',
              path: '/home/kucunchaxun'
            }
          ]
        },

        {
          tTitle: '财务管理',
          icon: 'el-icon-coin',
          children: [
            {
              title: '出入库台账',
              path: '/home/churutaizhang'
            },
            {
              title: '计划结算',
              path: '/home/jihuajiesuan'
            },
            {
              title: '年度出入台账',
              path: '/home/niandu'
            }
          ]
        },

        {
          tTitle: '统计报表',
          icon: 'el-icon-s-data',
          children: [
            {
              title: '出车统计',
              path: '/home/chuche'
            },
            {
              title: '变电统计',
              path: '/home/biandian'
            },
            {
              title: '导线统计',
              path: '/home/daoxian'
            },
            {
              title: '新品统计',
              path: '/home/xinpintongji'
            },
            {
              title: '电缆统计',
              path: '/home/dianlantongji'
            },
            {
              title: '物料出入统计',
              path: '/home/wuliaotongji'
            },
            {
              title: '人员任务统计',
              path: '/home/renyuanrenwutj'
            }
          ]
        }
      ]
    };
  },
  // created() {
  //   user.getInfo().then((response) => {
  //     let resdata = response.data.data;
  //     window.sessionStorage.setItem("role", resdata.userInfo.role);
  //   });
  // },
  methods: {
    logout() {
      this.$router.push('/login');
      home.logout().then(res => {
        sessionStorage.removeItem('token');
        sessionStorage.clear();
        this.$message.success('退出登录');
      });
    },
    //菜单激活事件
    clickIndex(index) {
      let indexNow = index;
      this.pathNow = index; //避免冗余跳转
      for (let i = 0; i < this.editableTabs.length; i++) {
        //让tab焦点转移到当前菜单
        if (this.editableTabs[i].path === indexNow) {
          this.editableTabsValue = this.editableTabs[i].name;
        }
      }
      /* console.log(indexNow); */
      if (indexNow == '/home/index') {
        this.addTab({
          title: '主页',
          name: '99',
          path: indexNow
        });
      } else {
        for (let i = 0; i < this.submenuArr.length; i++) {
          for (let j = 0; j < this.submenuArr[i].children.length; j++) {
            var subPath = this.submenuArr[i].children[j].path;
            if (subPath == indexNow) {
              this.tabData = this.submenuArr[i].children[j];
            }
          }
        }
        this.addTab(this.tabData);
      }
      /* console.log(this.tabData); */
    },
    //添加标签页
    addTab(menuData) {
      let ifTab = false;
      let tabLen = this.editableTabs.length;
      let newTabName = ++this.tabLenName + '';
      /* console.log(newTabName); */
      if (tabLen != '1') {
        for (let i = 0; i < this.editableTabs.length; i++) {
          /* console.log(this.editableTabs[i].title); */
          if (menuData.title === this.editableTabs[i].title) {
            ifTab = true;
          }
        }
        /* console.log(this.editableTabs); */
      }
      /* console.log(ifTab); */
      if (!ifTab) {
        this.editableTabs.push({
          title: menuData.title,
          name: newTabName,
          path: menuData.path
        });
        this.editableTabsValue = newTabName;
      }
    },
    //删除标签
    removeTab(targetName) {
      /* console.log(targetName); */
      let tabs = this.editableTabs;
      let activeName = this.editableTabsValue; //当前获得焦点的tab标签 是第几个
      /* console.log(activeName); */
      let path;

      if (activeName === targetName) {
        if (tabs.length === 1) {
          //当name为1 即第一个标签时，给地址赋值为主页
          path = '/home';
        } else if (
          activeName === tabs[0].name ||
          activeName !== tabs[tabs.length - 1].name
        ) {
          //焦点在第一个标签 且 渲染表格的长度不为1
          for (let i = 0; i < tabs.length; i++) {
            if (tabs[i].name === targetName) {
              path = tabs[i + 1].path;
            }
          }
        } else {
          for (let i = 0; i < tabs.length; i++) {
            if (tabs[i].name === targetName) {
              path = tabs[i - 1].path;
            }
          }
          /* console.log(path); */
          /* path = tabs[targetName - 1].path; */
        }
        this.$router.push(path); //跳转到上一个标签的 path
      }
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }
      this.editableTabsValue = activeName;

      this.editableTabs.splice(
        this.editableTabs.findIndex(e => e.name === targetName),
        1
      );
    },
    //点击tab跳转页面
    routerTo(pathUrl) {
      let path;
      for (let i = 0; i < this.editableTabs.length; i++) {
        if (this.editableTabs[i].name == pathUrl.name) {
          path = this.editableTabs[i].path;
        }
      }
      if (this.pathNow !== path) {
        this.$router.push(path);
      }
      this.pathNow = path; //避免冗余跳转
    },
    //删除全部标签
    deleteAllTab() {
      let len = this.editableTabs.length;
      for (let i = 0; i < len; i++) {
        this.editableTabs.shift();
      }
    },
    tabTwigger() {
      this.isActive = true;
      console.log(this.isActive);
    }
  }
};

//滚动条跟踪
window.onscroll = function() {
  var oDiv = document.getElementById('full');
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  //oDiv.style.top = (document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop+'px';
  startMove(
    parseInt(
      (document.documentElement.clientHeight - oDiv.offsetHeight) / 2 +
        scrollTop
    )
  );
};
var time = null;
function startMove(iTarget) {
  var oDiv = document.getElementById('full');
  clearInterval(time);
  time = setInterval(function() {
    var speed = iTarget - oDiv.offsetTop;
    /* console.log(speed); */
    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
    if (oDiv.offsetTop == iTarget) {
      clearInterval(time);
    } else {
      oDiv.style.top = oDiv.offsetTop + speed + 'px';
    }
  }, 0);
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
#app {
  height: 100%;
}
.logo-text-wrapper {
  position: absolute;
  left: 80px;
  top: 5px;
  text-align: right;
}
::-webkit-scrollbar {
  width: 0px;
}
.home {
  height: 100%;
}
.el-container {
  height: 100%;
}
.el-header {
  width: 100%;
  padding: 0 0;
}
.headDiv1 {
  background-color: #322f3b;
  font-size: 14px;
  line-height: 60px;
  color: rgb(255, 255, 255);
  user-select: none;
  -webkit-user-select: none;
}
.headSpan2 {
  float: right;
  padding: 0px 20px;
}
.headSpan2 i {
  margin: 0 20px;
  cursor: pointer;
}
.headSpan2 i:nth-child(2) {
  margin-right: 40px;
}
.aside_header {
  width: 100%;
  height: 80px;
  line-height: 56px;
  text-align: center;
  font-size: 22px;
  font-weight: bolder;
  color: white;
  background-color: #35333c;
}
.el-aside {
  height: 100% !important;
  background-color: #35333c;
}
.el-main {
  padding: 10px;
  background-color: #f0f2f5;
}
.mainDiv {
  display: inline-block;
  width: 79%;
  height: 41px;
  background: white;
  position: absolute;
  box-shadow: 0.2em 0.2em 0.2em rgba(155, 155, 155, 0.5);
}
.el-tabs >>> .el-tabs__header {
  margin-bottom: 0;
}
.mainView {
  margin-top: 15px;
}
。 .headBt1 {
  background-color: #322f3b;
  font-size: 25px;
  margin-top: 5px;
  border: 0;
}
.headBt1:hover {
  background-color: #3e3841;
}
.headBt1:focus {
  background-color: #3e3841;
}
.el-menu a {
  text-decoration: none;
}
hr {
  margin-bottom: 30px;
}
.el-menu-item:hover {
  background-color: #8076a3 !important;
}
.el-menu-item.is-active {
  background-color: #8076a3 !important;
}
.el-submenu {
  width: 200px;
}
.elmenuFir {
  width: 200px;
}
.deleteTab {
  margin-right: 0;
  padding: 10px 12px;
}
.deleteTab >>> span {
  font-size: 12px;
}
.deleteBtn {
  width: 7%;
  height: 30px;
  display: inline-block;
  position: relative;
  top: 4px;
  left: 93%;
  clear: both;
}
.full {
  position: absolute;
  height: 100%;
  width: 200px;
  background-color: #35333c;
  bottom: 0;
  z-index: -1;
}
.loginout {
  background-color: #322f3b;
  border: 0;
}
.loginout:hover {
  background-color: #e2e1e4;
}
.loginout:focus {
  background-color: #d1c2d3;
}
.father >>> .el-submenu__title:hover {
  background-color: #8076a3 !important;
}
</style>
